<template>
  <div class="payadd">
    <el-tabs type="border-card">
      <el-tab-pane v-if="this.obj.type == 'ADD'" label="新增计费项目">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item style="margin-left: 50px" label="计费项目名称">
            <el-input style="width: 500px; margin-right: 50px" v-model="formInline.payname"
              placeholder="新增计费项目"></el-input>
          </el-form-item>

          <el-form-item label="项目优先级">
            <el-input style="width: 500px" v-model="formInline.paylevel" placeholder="项目优先级"></el-input>
          </el-form-item><br />

          <el-form-item style="margin-left: 45px" label="项目用量/时长">
            <el-input style="width: 500px; margin-right: 63px" v-model="formInline.paynum"
              placeholder="项目用量/时长"></el-input>
          </el-form-item>

          <el-form-item label="项目价格">
            <el-input style="width: 500px" v-model="formInline.paymoney" placeholder="项目价格"></el-input>
          </el-form-item><br />

          <el-form-item style="margin-left: 80px" label="通知状态">
            <el-select v-model="str1" style="width: 500px; margin-right: 63px" clearable placeholder="请选择状态">
              <el-option v-for="(item, index) in option1" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="计费目录">
            <el-select v-model="str2" style="width: 500px" clearable placeholder="请选择状态">
              <el-option v-for="(item, index) in option2" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="main-con-foot">
          <span>通知内容</span>
          <vue-ueditor-wrap class="addtit" v-model="forms.paycontent" :config="ueConfig"></vue-ueditor-wrap>
        </div>
      </el-tab-pane>

      <el-tab-pane class="view" v-else label="计费项目查看">
        <p>计费项目查看：{{ this.forms.payname }}</p>
        <p>项目优先级：{{ this.forms.paynum }}</p>
        <p>项目用量/时长：{{ this.forms.paylevel }}</p>
        <p>项目价格：{{ this.forms.paymoney }}</p>
        <p>通知状态：{{ this.forms.paystatus }}</p>
        <p>通知人：{{ this.forms.username }}</p>
        <div>
          通知内容：<span v-html="this.forms.paycontent"></span>
        </div>
        
        <div>
          <!-- <p v-if="this.forms.unitstatus==1">状态：已建成</p>
    <p v-else>状态：未建成</p> -->
        </div>

      </el-tab-pane>

    </el-tabs>
    <el-button @click="handleReturn" type="primary" icon="el-icon-caret-left">
      返回</el-button>
    <el-button v-if="this.obj.type == 'ADD'" class="btn2" @click="handleAdd" type="primary" icon="el-icon-document">
      保存</el-button>
    <el-button class="btn3" @click="handleAdd" type="primary" icon="el-icon-s-promotion
">
      提交</el-button>
  </div>
</template>
<script>
// 引入
import VueUeditorWrap from "vue-ueditor-wrap";

export default {
    // 标识,当前组件的名称
    name: "text_f",
  components: {
    VueUeditorWrap
  },
  data() {
    return {
      ueConfig: {
        // UEditor 资源文件的存放路径，就是放置UEditor的文件路径
        UEDITOR_HOME_URL: "/ueditor/",
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 上传文件接口
        enableAutoSave: false,
        // 上传文件接口
        // serverUrl: this.$axios.defaults.baseURL + '/mh/ueditor/config',
        serverUrl: 'http://112.6.99.125:7013/safetyPatrol/mh/ueditor/config',
        elementPathEnable: false,
        wordCount: false
      },
      ids: null,
      obj: [],
      str1: "",
      str2: "",
      formInline: {
        payname: "",
        paylevel: "",
        paynum: "",
        paymoney: "",
        c_id: "",
        coststatus: "",
        paycontent: "",
      },
      forms: {
        payname: "",
        paylevel: "",
        paynum: "",
        paymoney: "",
        paystatus: "",
        username: "",
        paycontent: "",
      },
      option1: [
        {
          value: 2,
          label: "未通知",
        },
        {
          value: 1,
          label: "已通知",
        },
      ],
      option2: [
        {
          value: 7,
          label: "电费目录",
        },
        {
          value: 8,
          label: "水费固定月目录",
        },
        {
          value: 9,
          label: "水费按量目录",
        },
        {
          value: 10,
          label: "天然气目录",
        },
        {
          value: 11,
          label: "物业费目录",
        },
        {
          value: 12,
          label: "宽带费目录",
        },
      ],
    };
  },
  methods: {
    handleReturn() {
      this.$router.push("/pay/payType")
    },
    handleAdd() {
      this.$confirm("确认保存计费信息？", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$Axios({
            url: "/cost/addCostData",
            method: "post",
            data: {
              payname: this.formInline.payname,
              paylevel: this.formInline.paylevel,
              paynum: this.formInline.paynum,
              paymoney: this.formInline.paymoney,
              c_id: this.str2,
              coststatus: this.str1,
              paycontent: "",
            },
            success: (result) => {
              setTimeout(() => {
                this.$message({
                  message: "保存计费信息成功",
                  type: "success",
                });
                this.$router.push("/pay/payType")
              }, 200);
            },
          });
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "已取消保存计费信息" : "停留在当前页面",
          });
        });
    },
    handleSearch() {
      this.obj = this.$route.query
      this.ids = this.obj.detailId
      this.$Axios({
        url: "/cost/getCostDetail",
        method: "get",
        data: {
          id: this.ids
        },
        success: (result) => {
          setTimeout(() => {
            this.forms.payname = result[0].payname
            this.forms.paynum = result[0].paynum
            this.forms.paylevel = result[0].paylevel
            this.forms.paymoney = result[0].paymoney
            this.forms.paystatus = result[0].paystatus
            this.forms.username = result[0].username
            this.forms.paycontent = result[0].paycontent
            // this.handleClick()
          }, 200);
        },
      });


    },
  },
  mounted() {
    this.handleSearch()
  }
};
</script>
<style lang="scss" scoped>
.payadd::v-deep {
  .inp {
    margin-right: 50px;
  }

  button {
    width: 100px;
    height: 40px;
    position: fixed;
    right: 20px;
    top: 180px;
  }

  .btn2 {
    top: 240px;
  }
  .btn3 {
    top: 300px;
  }

  .view {
    p,div {
      font-size: 14px;
      font-weight: 400;
      line-height: 50px;
      margin-left: 40px;
    }
    div{
      p{
        display: inline-block;
      }
    }
  }
  .main-con-foot {
    display: flex;
    margin-left:70px;
    span {
      font-size: 14px;
      margin: 0 10px;
    }
  }

  .addtit {
    width: 84%;
    display: inline-block;
  }
}
</style>
